<template>
  <li>
    <label>
      <input @click="changedone(todo.id)" type="checkbox" :checked="todo.done">
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" @click="del(todo.id)">删除</button>
  </li>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "TodoItem",
  props:["todo" ],
  methods:{
    changedone(id){
      // this.change(id)
      this.$bus.$emit('change',id)
    },
    del(id){
      if(confirm("是否确认？")){
        // this.deltodo(id)
        // this.$bus.$emit('deltodo',id)
        pubsub.publish('deltodo',id)
        console.log(id)
      }
    }
  }
}
</script>

<style scoped>
  li{
    width: 200px;
  }
  li:hover{
    background-color: #00d6b2;
  }
  li button{
    float: right;
    display: none;
  }
  li:hover button{
    display: block;
  }
</style>
